<template>
  <div class="tree">
    <tree_grid v-for="(item,keys) in list" :trees="list" :key="list.id" :allTrees="list" :item="item" :mark="keys"
               :expandFunc="expandFunc" :num="list.length" :callbackFunc="callbackFunc" :name="item.name">
    </tree_grid>
  </div>
</template>
<script type="text/ecmascript-6">
  import _    from  'lodash';
  export default {
    name:'tree',
    props: {
      expandFunc: {
        type: Function,
      },
      callbackFunc: {
        type: Function
      },
      lists: {
        type: Array,
        default(){
            return [];
        }
      }
    },
    data(){
        return {
          isOpen:false,
          level:0,
          parent:null,
          list:this.lists
        }
    },
    created(){
      this._initData();
    },
    methods: {
      _initData(){
        let items      = JSON.parse(JSON.stringify(this.list));
        //生成缩进模板
        let  spaceHtml=(times)=>{
          let   tpl          = `<i class="ms-tree-space"></i>`;
          let   giftHtml     ='';
          for(let i=0;i<times;++i){giftHtml+=tpl;}
          return giftHtml;
        };
        //            递归添加属性
        let    handleData=(items,level,parent)=>{
          items.forEach((item)=>{
            item.clickNode     = false;                  //是否是被点击的那个那个节点
            item.spaceIndex    = spaceHtml(level);        // 缩进的样式
            item.parent        = parent;                 // 如果是顶级的样式那么就直接把当前的样式图标设置成+ 如果为true 那么就可以设置为展开的图标-
            item.children=item.children || [];           // 置空子节点
            if(item.children.length>0){
              item.children.forEach((item_node)=>{
                item_node.initClose   =true;            // 空值树是否关闭或者展开
              });
              item.isFloder    = this.isOpen;          //  判断是否是文件夹
              item.isExpand    = this.isOpen;          //  判断是否应该展开 文件夹就不展
              handleData(item.children,level+1,item);  // 给每个加上我们的层级关系
            }else {
              delete  item.children;
            }
          })
        };
        handleData(items,this.level,this.parent);
        this.$nextTick(()=>{
          this.list=[...items];
        });
      },
    }
    ,components:{
      tree_grid:{
        name  : 'tree_grid',
        data(){
          return {
            control_icon:false,
          }
        },
        props : {
          item:{
            type:Object,
          },
          num:{
            type:Number,
            default:0,
          },
          trees:{
            type:Array,

          },
          name:{
            type:String,
            default:''
          },
          callbackFunc:{
            type:Function,
          },
          mark:{
            type:Number,
            default:0
          },
          allTrees:{
            type:Array,
            default(){
              return [];
            },
          },
          expandFunc:{
            type:Function
          }
        },
        computed:{
          //判断是否应该加上背景图片△ ▽ 同时也是判读当前是否是父节点的标准
          _isBackGround(){
            return  this.item.children ?true:false;
          },
          //判断是否是子节点 字节点需要点击空值显示或者隐藏
          _isChildren(){
            return    this.item.parent || this.item.parent!==null?true:false;
          },
          //判断是否收起
          _isShrink(){
            //判断必须是子节点并且当前有子节点的都应该收起来
            return  this._isChildren && this._isBackGround?'tree_close':'tree_open';
          },
          //判断是否是文件夹 当然当前的顶级节点是需要显示文件夹图标的
          _isDir(){
            return  this._isBackGround?true:false;
          },
          _isEnd(){
            return  !this.item.children ?true:false;
          },
          _isClose(){
              return this.item.initClose===true?'close_tree_node':'open_tree_node';
          },
          _upDown(){
              let class_mete='';
              if(_isDir && item.isExpand===false){
                class_mete='mark_up';
              }
              if(_isDir && item.isExpand===true){
                class_mete= 'mark_down';
              }
              return class_mete;
          },
          _dirUpDown(){
              let dir_mete   ='';
            if(_isDir && item.isExpand===false){
              dir_mete   ='tree_group_up'
            }
            if(_isDir && item.isExpand===true){
              dir_mete   = 'tree_group_down'
            }
            return dir_mete
          }

        },
        methods:{
          _open(item){
            if(typeof  this.expandFunc=='function'){
              //展开当前点击节点的子元素 根据当前的那个clickNode的值来空值
              item.isExpand        = !item.isExpand;
              // 用原生js的call去实现外部方法唤醒。。。。this.$emit只针对字符组件。。。兄弟组件使用 vue bus.$emit  bus.$no bus.$close
              this.expandFunc.call(null,item,item.children);
            }
            this._treeExpand(item)
          },
          // 查 找 点 击 的 子 节 点
          _findChildNode(item){
            if(typeof this.callbackFunc=="function"){
              this.callbackFunc.call(null,item);
            }
           this._bridge(item);
          },
          _treeExpand(item){
             let item_expand=!item.isExpand;
             if(item.children){
                 item.children.forEach((item_node)=>{
                     item_node.initClose=item_expand;
                 })
             }
          },
          _bridge(item){
            let node     =item;let trees  = this.allTrees;
            //这里是需要单选的如果多选的话那么就不需要当前的方法
            let _getNode =(items)=>{
              items.forEach((node_item)=>{
                //这里需要全部重置当前其他没有选中的clickNode属性
                if(node_item.id==node.id){
                  node_item.clickNode =true;
                }else {
                  node_item.clickNode =false;
                  if(node_item.children){
                    _getNode(node_item.children);
                  }
                }
              });
            };
            _getNode(trees);
          },
          _mouseIndex(item){
            this._bridge(item);
          }
        },
        //  渲染当前的模板
        template:
          `<div  :class="_isClose">
               <span :class="{'tree_repeat_i':item.spaceIndex!==''?true:false}" v-if="item.spaceIndex" v-html="item.spaceIndex"></span>
               <div  v-if="_isBackGround" @click.prevent="_open(item)" :class="{'tree_mark_up':(_isDir && item.isExpand===false)?true:false,'tree_mark_down':(_isDir && item.isExpand===true)?true:false}" >
               </div>
               <div  v-if="_isBackGround" :class="{'tree_group_up':(_isDir && item.isExpand===false)?true:false,'tree_group_down':(_isDir && item.isExpand===true)?true:false}"></div>
               <div  v-if="_isEnd" :class="{'tree_child':_isEnd}"></div>
               <span  @click.prevent="_findChildNode(item)"   :class="{'tree_through':item.clickNode}">{{item.name}}</span>
               <tree_grid  v-if="item.children.length"  v-for="(itemChild,keys) in item.children" :callbackFunc="callbackFunc" :expandFunc="expandFunc" :allTrees="allTrees" :mark="keys" :trees="item.children" :key="itemChild.id" :item="itemChild" :num="item.children.length" :name="itemChild.name"></tree_grid>
           </div>`
      }
    }
  }
</script>
<style type="stylus">
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 14px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  .open_tree_node{padding-top:4px; padding-bottom:4px; }
  .close_tree_node{padding-top:4px; padding-bottom:4px;display :none}
  .tree{padding-left:10px; padding-top:6px;}
  .tree_repeat_i{float:left ;}
  .tree_mark_down{width:20px; height:20px; background:url("../../../components/comment/tree_grid/imag/2.png") no-repeat; float:left; display:inline;}
  .tree_mark_up{width:20px; height:20px; background:url("../../../components/comment/tree_grid/imag/1.png") no-repeat; float:left; display:inline;}
  .tree_group_up{width:20px; height:20px;  background:url("../../../components/comment/tree_grid/imag/4.png") no-repeat; margin-right:10px; float:left; display:inline;}
  .tree_group_down{width:20px; height:20px;  background:url("../../../components/comment/tree_grid/imag/3.png") no-repeat; margin-right:10px; float:left; display:inline;}
  .tree_child{width:20px; height:20px;  background:url("../../../components/comment/tree_grid/imag/5.png") no-repeat; margin-right:10px; float:left; display:inline;}
</style>
